iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
0
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 5

Day5 網頁前端-刻意練習(綜合練習#1)

  • 分享至 

  • xImage
  •  

Day5 金魚 綜合練習#1

https://ithelp.ithome.com.tw/upload/images/20200904/20129161HavyyKWmYE.jpg
https://ithelp.ithome.com.tw/upload/images/20200904/20129161LE9VGzLe5r.png

簡單小語

這次的練習發現許多細節在初學時沒有注意好,例如空間的配置以及paddingmargin的應用,如何讓版面排起來增加可閱讀性及舒適度,確實是還需要多加磨練的地方,這次的RWD增加了手機裝置的閱讀性,避免過多的圖文重複出現,因此有稍微衡量過整體閱讀觀感,開始使用JQuery做一些互動效果,插入了animate套件讓網頁互動性增加,header使用了下拉式選單方便手機點選,持續練習,發現過往的不足,修正並思考,每當大尺寸或小尺寸做完都豁然開朗,但過了5分鐘後發現,還有RWD啊大哥,醒醒吧,你還沒做完。

筆記分享

  1. 使用transform: translateXY增加hover觸碰後的移動效果。
  2. 使用transform: scale(0,1)增加hover觸碰後的移動效果。
  3. headermain-footersearch bar需使用flex讓物件彼此沒有空隙。
  4. 圖片img的寬度比例大小要多掌握,可用Google開發者工具檢查圖片的尺寸。
  5. ::before::after使用在刻三角形時需注意物件本身寬度,避免使用%跑版,三角形用border-top,bottom,left,right搭配。
  6. 圖片交錯交疊時可以使用margin-left-right移動物件產生交疊效果。
  7. 使用flex時若需要左右物件互換位置,可用orderflex-direction: row-reverse可以嘗試運用看出差異。
  8. 通用格式的More可在父層使用flex後再使用align-self控制自己得位置。
  9. flex-grow: 1,自動分配物件的空間,每個物件佔一等分,需先將width = 0讓物件本身沒有寬度(關鍵啊)。
  10. 使用animation可多分幾個frame(0%,25%,50%,75%,100%),嘗試做到細部動畫(雖然我懶只做0%,100%哈哈)。

刻意練習

Practice(200719 Day 5)

首次練習

Practice(200526_綜合練習#1)


2020 iT邦幫忙鐵人賽 Day5 網頁前端-刻意練習(綜合練習#1)


上一篇
Day4 網頁前端-刻意練習(稀飯版+蓋版廣告)
下一篇
Day6 網頁前端-刻意練習(綜合練習#2)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言